<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    const obj = {
      tag: 'div',
      children: [
        {tag: 'span', children: 'hello vue'}
      ]
    }

    function render (obj, root) {
      const el = document.createElement(obj.tag)
      if (typeof obj.children === 'string') {
        const text = document.createTextNode(obj.children)
        el.appendChild(text)
      } else if (Array.isArray(obj.children)) {
        obj.children.forEach((child) => {
          render(child, el)
        })
      }

      root.appendChild(el)
    }

    render(obj, document.body)
  </script>
</body>
</html>